<template>
  <div class="sp">
    <section style="margin-bottom: 50px">
      <Table
        :tableData="paneB.tableDataF"
        selection
        @btnClick="
          dialogVisible = true
          handleLc()
        "
      ></Table>
      <Pagination :total="paneB.tableDataF.row.length" />
    </section>

    <el-dialog
      title="流程"
      :visible.sync="dialogVisible"
      width="50%"
      append-to-body
    >
      <el-steps :active="active" finish-status="success" align-center>
        <el-step title="创建"></el-step>
        <el-step
          title="网络部开通"
          description="当前进度：A端省施工，联系方式：13158746388；Z端到达时间：2020-11-25"
        ></el-step>
        <el-step title="归档"></el-step>
      </el-steps>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          确 定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Table from '@/components/Table'
import Pagination from '@/components/Pagination'
export default {
  components: {
    Table,
    Pagination
  },
  data() {
    return {
      active: 2,
      dialogVisible: false,
      paneB: {
        tableDataF: {
          col: [
            {
              prop: 'colA',
              label: '订单编号'
            },
            {
              prop: 'colB',
              label: '客户名称'
            },
            {
              prop: 'colC',
              label: '业务名称'
            },
            {
              prop: 'colD',
              label: '状态'
            },
            {
              prop: 'colE',
              label: '创建时间'
            },
            {
              prop: 'colF',
              label: '操作',
              type: 'Button',
              btnList: [
                {
                  label: '查看流程图'
                }
              ]
            }
          ],
          row: [
            {
              colA: 'D258626',
              colB: '耕升公司',
              colC: '专网专线业务勘查',
              colD: '补录',
              colE: '2020-11-12'
            },
            {
              colA: 'D258625',
              colB: '利来公司',
              colC: '专网专线业务勘查',
              colD: '归档',
              colE: '2020-11-12'
            },
            {
              colA: 'D258624',
              colB: '美孚公司',
              colC: '专网专线业务勘查',
              colD: '政企调度员审批',
              colE: '2020-11-12'
            },
            {
              colA: 'D258623',
              colB: '盛运公司',
              colC: '专网专线业务勘查',
              colD: '政企调度员审批',
              colE: '2020-11-12'
            }
          ]
        }
      }
    }
  },
  methods: {
    handleLc() {
      setInterval(() => {
        this.active++
      }, 9000)
    }
  },
  created() {
    this.$bus.$on('addkc', () => {
      this.paneB.tableDataF.row.unshift({
        colA: 'D258627',
        colB: '盛丰公司',
        colC: '专网专线业务勘查',
        colD: '政企调度员审批',
        colE: '2020-11-19'
      })
    })
    this.$bus.$on('addsl', () => {
      this.paneB.tableDataF.row.unshift({
        colA: 'D258628',
        colB: '盛丰公司',
        colC: '专网专线业务受理',
        colD: '政企调度员审批',
        colE: '2020-11-19'
      })
    })
  }
}
</script>

<style lang="scss" scoped></style>
